<template>
	<view>
		<view class="header">
			<u-navbar
				:background="{ backgroundColor: '#0481fe' }"
				back-icon-color="#fff"
				back-icon-name="arrow-left"
				back-icon-size="40"
				title="消息详情"
				title-color="#fff"
				title-size="40"
				title-bold
			>
				<view slot="right" class="icon_r" @click="handleAllMsg"><text></text></view>
			</u-navbar>
		</view>
		<scroll-view scroll-top="0" scroll-y="true" :style="`height:${scrollHeight}px`">
			<view class="list">
				<view class="list_item" v-if="content.reply">
					<view class="item_title">客服回复</view>
					<view class="item_content">
						<view class="item_dec u-line-2">{{ content.reply }}</view>
						<view class="item_time">留言时间:{{ content.reply_time }}</view>
					</view>
				</view>
				<view class="list_item">
					<view class="item_title">您的留言</view>
					<view class="item_content">
						<view class="item_dec u-line-2">{{ content.content }}</view>
						<view class="item_time">留言时间:{{ content.back_time }}</view>
					</view>
				</view>
			</view>
			<view class="fixedView"></view>
		</scroll-view>
	</view>
</template>

<script>
import ajax from '@/api'
import { mixin } from '@/utils/mixins'
export default {
	mixins: [mixin],
	data() {
		return {
			key: 0,
			id: '',
			content: '',
			page: 1,
			length: 10,
			list: []
		}
	},
	components: {},
	filters: {
		allNumber(obj) {
			if (!obj.length) return 0
			return obj.map((item) => item.is_see == 1).length
		}
	},
	onLoad(options) {
		const { id } = options
		this.id = id
	},
	onShow() {
		this.init()
	},
	methods: {
		async init() {
			try {
				const data = await ajax.getMsgInfo({ identification: this.id })
				this.content = data
				console.log(this.content)
			} catch (e) {
				console.log(e)
			}
		},
		handleBack() {
			uni.navigateBack()
		},
		async handleAllMsg() {
			if (!this.list.length) return
			uni.showLoading({
				title: '拼命加载中...',
				mask: true
			})
			try {
				await ajax.postMsgAll({})
				uni.hideLoading()
				this.key++
			} catch (error) {
				uni.hideLoading()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.no_msg {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 80vh;
}
.fixedView {
	height: 30px;
}
.list {
	padding: 0 32rpx;
	.list_item {
		margin-bottom: 140rpx;
		.item_title {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			text-align: center;
			color: #696969;
		}
		.item_content {
			margin-top: 12rpx;
			padding: 28rpx 22rpx;
			background: #fff;
			box-shadow: 0px 6px 12px rgba(11, 137, 254, 0.08);
			border-radius: 16rpx;
			.item_time {
				font-size: 24rpx;
				margin-top: 40rpx;
				font-family: PingFang SC;
				font-weight: 400;
				text-align: right;
				color: #bdbdbd;
			}
			.item_dec {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #333333;
				margin-top: 6rpx;
			}
		}
	}
}
.icon_r {
	height: 44rpx;
	position: relative;
	z-index: 9;
	.msg {
		width: 100%;
		height: 100%;
	}
	.msg_num {
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		background: #fc1f1f;
		border-radius: 50%;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		position: absolute;
		right: -15%;
		top: -15%;
	}
}
</style>
